<template>
  <div class="add">
<van-collapse v-model="activeName" accordion >
  <van-collapse-item title="组织用户" name="1">
<van-sidebar v-model="active" class="app" @change="on">
  <van-sidebar-item title="组织管理" />
  <van-sidebar-item title="用户管理" />
  <van-sidebar-item title="职务管理" />
  <van-sidebar-item title="岗位管理" />
</van-sidebar>
  </van-collapse-item>
  <van-collapse-item title="菜单权限" name="2">
    <van-sidebar v-model="active"  class="app">
  <van-sidebar-item title="角色管理" />
  <van-sidebar-item title="角色受理" />
  <van-sidebar-item title="菜单管理" />
</van-sidebar>
  </van-collapse-item>
  <van-collapse-item title="应用管理" name="3">
    <van-sidebar v-model="active"  class="app">
  <van-sidebar-item title="应用开发" />
  <van-sidebar-item title="流程监控" />
  <van-sidebar-item title="流程分析" />
  <van-sidebar-item title="应用模板" />
  <van-sidebar-item title="应用市场" />
</van-sidebar>
  </van-collapse-item>  
  <van-collapse-item title="配置管理" name="4">
        <van-sidebar v-model="active"  class="app">
  <van-sidebar-item title="门户配置" />
  <van-sidebar-item title="数据字典" />
  <van-sidebar-item title="SQL配置" />
  <van-sidebar-item title="多数据源" />
  <van-sidebar-item title="系统参数" />
  <van-sidebar-item title="分类字典" />
  <van-sidebar-item title="服务配置" />
</van-sidebar>
  </van-collapse-item>
    <van-collapse-item title="系统监控" name="5">
            <van-sidebar v-model="active"  class="app">
  <van-sidebar-item title="日志管理" />
  <van-sidebar-item title="性能监控" />
  <van-sidebar-item title="SQL监控" />
</van-sidebar>
  </van-collapse-item>
    <van-collapse-item title="系统工具" name="6">
            <van-sidebar v-model="active"  class="app">
  <van-sidebar-item title="定时任务" />
  <van-sidebar-item title="在线文档" />
  <van-sidebar-item title="代码生成工具" />
  <van-sidebar-item title="大屏可视化" />
</van-sidebar>
  </van-collapse-item>

</van-collapse>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: 'HelloWorld',
    setup() {
    const activeName = ref('1'),
          active = ref(0);
    return { activeName ,active,};

  },
  methods:{
    on(index){
      this.$emit("id",index+1)
    }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
